<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>CSS组件 - SimpleeUI - 上海同道前端UI库</title>
	<script src="js/prettify.js"></script>
	<link rel="stylesheet" href="css/simplee-debug.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body onload='prettyPrint()'>
	<div class="header">
		<div class="container">
			<div class="grid grid-4 first logo"><a href="index.html">SimpleeUI</a></div>
			<div class="grid grid-11">
				<ul class="menu unstyled inline">
					<li><a href="index.html">首页</a></li>
					<li><a href="css.html">CSS组件</a></li>
					<li><a href="js.html">JS插件</a></li>
					<li><a href="standard.html">使用规范</a></li>
				</ul>
			</div>
			<div class="grid grid-5 last"><a href="mailto:gaom19900925@gmail.com">@_Simplee_</a></div>
		</div>
	</div>
	<div class="content clearfix">
		<div class="container">
			<div class="grid grid-20 base">
				<h4>CSS组件</h4>
				<ul class="unstyle inline">
					<li><a href="#button">Buttons(按钮)</a></li>
					<li><a href="#table">Tables(表格)</a></li>
					<li><a href="#search">Search(搜索)</a></li>
					<li><a href="#tab">Tabs(标签切换)</a></li>
					<li><a href="#breadcrumb">Breadcrumbs(面包屑)</a></li>
					<li><a href="#sidemenu">SideMenu(侧边菜单)</a></li>
					<li><a href="#pagination">Pagination(分页)</a></li>
				</ul>
			</div>
			<div class="workplace grid grid-20">
				<h4 id="button">Buttons(按钮)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#button-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#button-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="button-example">
								<h5>默认按钮</h5>
								<button class="button">默认</button>
								<button class="button button-success">成功</button>
								<button class="button button-warning">警告</button>
								<button class="button button-error">错误</button>
								<button class="button button-info">重要</button>
								<h5>按钮大小</h5>
								<button class="button button-mini">微型</button>
								<button class="button button-small">小型</button>
								<button class="button button">默认</button>
								<button class="button button-large">大型</button>
								<h5>禁用状态</h5>
								<button class="button disabled">禁止点击</button>
						</div>
						<div class="tab-content-pane" id="button-code">
							<pre class="prettyprint">&lt;!--默认按钮--&gt;<br>&lt;button class="button"&gt;默认&lt;/button&gt;<br>&lt;button class="button button-success"&gt;成功&lt;/button&gt;<br>&lt;button class="button button-warning"&gt;警告&lt;/button&gt;<br>&lt;button class="button button-error"&gt;错误&lt;/button&gt;<br>&lt;button class="button button-info"&gt;重要&lt;/button&gt;<br>&lt;!--按钮大小--&gt;<br>&lt;button class="button button-mini"&gt;微型&lt;/button&gt;<br>&lt;button class="button button-small"&gt;小型&lt;/button&gt;<br>&lt;button class="button button"&gt;默认&lt;/button&gt;<br>&lt;button class="button button-large"&gt;大型&lt;/button&gt;<br>&lt;!--禁用状态--&gt;<br>&lt;button class="button disabled"&gt;禁止点击&lt;/button&gt;<br></pre>
						</div>
					</div>
				</div>
				<h4 id="table">Tables(表格)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#table-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#table-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="table-example">
							<div class="grid grid-9 first">
								<h5>默认表格</h5>
								<table class="table">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="grid grid-10 last">
								<h6>带边框表格<code>.table-bordered</code></h6>
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="grid grid-9 first">
								<h6>紧凑型表格<code>.table-condensed</code></h6>
								<table class="table table-condensed">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="grid grid-10 last">
								<h6>组合表格<code>.table-condensed .table-bordered .table-striped</code></h6>
								<table class="table table-condensed table-bordered table-striped table-hover">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="tab-content-pane" id="table-code">
							<pre class="prettyprint">&lt;!-- 默认 --&gt;
&lt;table class=&quot;table&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 带圆角和边框 --&gt;
&lt;table class=&quot;table-bordered&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 紧凑表格 --&gt;
&lt;table class=&quot;table-condensed&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 隔行变色 --&gt;
&lt;table class=&quot;table-striped&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 移入反馈 --&gt;
&lt;table class=&quot;table-hover&quot;&gt;
...
&lt;/table&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="search">Search(搜索)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#search-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#search-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="search-example">
							<div class="grid grid-9 first">
								<h5>默认搜索</h5>
								<form action="" class="form-search">
									<input type="text" placeholder="请输入关键词..." class="form-input">
									<button type="button" class="button form-submit">搜索</button>
								</form>
							</div>
							<div class="grid grid-10 last">
								<h5>带分类搜索</h5>
								<form action="" class="form-search">
									<input type="text" placeholder="请输入关键词..." class="form-input"><div class="form-select">
										<span class="form-select-selected">全站搜索</span>
										<ul class="form-select-menu unstyled">
											<li data-action="#">全站搜索</li>
											<li data-action="#">文章</li>
											<li data-action="#">律师</li>
											<li data-action="#">律所</li>
										</ul>
									</div>
									<button type="button" class="button form-submit">搜索</button>
								</form>
							</div>
						</div>
						<div class="tab-content-pane" id="search-code">
							<pre class="prettyprint">&lt;!-- 搜索框 --&gt;
&lt;form action=&quot;&quot; class=&quot;form-search&quot;&gt;
&lt;input type="text" placeholder="请输入关键词..." class="form-input"&gt;
&lt;button type="button" class="button form-submit"&gt;搜索&lt;/button&gt;
&lt;/form&gt;

&lt;!-- 带分类选择搜索框 --&gt;
&lt;form action=&quot;&quot; class=&quot;form-search&quot;&gt;
&lt;input type="text" placeholder="请输入关键词..." class="form-input"&gt;
&lt;div class="form-select"&gt;
	&lt;span class="form-select-selected"&gt;全站搜索&lt;/span&gt;
	&lt;ul class="form-select-menu unstyled"&gt;
		&lt;li data-action="#"&gt;全站搜索&lt;/li&gt;
		&lt;li data-action="#"&gt;文章&lt;/li&gt;
		&lt;li data-action="#"&gt;律师&lt;/li&gt;
		&lt;li data-action="#"&gt;律所&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
&lt;button type="button" class="button form-submit"&gt;搜索&lt;/button&gt;
&lt;/form&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="tab">Tab(标签切换)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#tab-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#tab-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="tab-example">
								<div class="tab">
									<ul class="tab-title clearfix">
										<li class="tab-title-item first active"><a href="#item1" data-toggle="tab">标签一</a></li>
										<li class="tab-title-item"><a href="#item2" data-toggle="tab">标签二</a></li>
										<li class="tab-title-item"><a href="#item3" data-toggle="tab">标签三</a></li>
										<li class="tab-title-item"><a href="#item3" data-toggle="tab">标签四</a></li>
									</ul>
									<div class="tab-content clearfix">
										<div class="tab-content-pane active" id="item1">
											标签一内容
										</div>
										<div class="tab-content-pane" id="item2">
											标签二内容
										</div>
										<div class="tab-content-pane" id="item3">
											标签三内容
										</div>
										<div class="tab-content-pane" id="item4">
											标标签四内容
										</div>
									</div>
								</div>
						</div>
						<div class="tab-content-pane" id="tab-code">
							<pre class="prettyprint">
&lt;div class="tab"&gt;
	&lt;ul class="tab-title clearfix"&gt;
		&lt;li class="tab-title-item first active"&gt;&lt;a href="#item1" data-toggle="tab"&gt;标签一&lt;/a&gt;&lt;/li&gt;
		&lt;li class="tab-title-item"&gt;&lt;a href="#item2" data-toggle="tab"&gt;标签二&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class="tab-content clearfix"&gt;
		&lt;div class="tab-content-pane active" id="item1"&gt;
			标签一内容
		&lt;/div&gt;
		&lt;div class="tab-content-pane" id="item2"&gt;
			标签二内容
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="breadcrumb">Breadcrumbs(面包屑)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#breadcrumb-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#breadcrumb-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="breadcrumb-example">
							<ul class="breadcrumb unstyled inline">
								<li><a href="">首页</a></li><li><a href="">新闻中心</a></li><li><a href="">律所动态</a></li><li class="last">正文</li>
							</ul>
						</div>
						<div class="tab-content-pane" id="breadcrumb-code">
							<pre class="prettyprint">
&lt;ul class="breadcrumb unstyled inline"&gt;
	&lt;li&gt;&lt;a href=""&gt;首页&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=""&gt;新闻中心&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=""&gt;律所动态&lt;/a&gt;&lt;/li&gt;
	&lt;li class="last"&gt;正文&lt;/li&gt;
&lt;/ul&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="sidemenu">Sidemenu(侧边菜单)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#sidemenu-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#sidemenu-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="sidemenu-example">
							<ul class="sidemenu unstyled">
								<li class="sidemenu-header">新闻中心</li>
								<li class="active"><a href="#">行业动态</a></li>
								<li><a href="#">律所资讯</a></li>
								<li class="sidemenu-header">关于我们</li>
								<li><a href="#">律所简介</a></li>
								<li><a href="#">律所案例</a></li>
								<li><a href="#">联系我们</a></li>
							</ul>
						</div>
						<div class="tab-content-pane" id="sidemenu-code">
							<pre class="prettyprint">
&lt;ul class="sidemenu unstyled"&gt;
	&lt;li class="sidemenu-header"&gt;新闻中心&lt;/li&gt;
	&lt;li class="active"&gt;&lt;a href="#"&gt;行业动态&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;律所资讯&lt;/a&gt;&lt;/li&gt;
	&lt;li class="sidemenu-header"&gt;关于我们&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;律所简介&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;律所案例&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="pagination">Pagination(分页)</h4>
				<div class="tab">
					<ul class="tab-title clearfix">
						<li class="tab-title-item first active"><a href="#pagination-example" data-toggle="tab">示例</a></li>
						<li class="tab-title-item"><a href="#pagination-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-content-pane active" id="pagination-example">
							<div class="pagination">
								<ul>
									<li class="disabled"><span href="#">上一页</span></li>
									<li class="active"><span href="#">1</span></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li class="ellipsis"><span>...</span></li>
									<li><a href="#">12</a></li>
									<li><a href="#">下一页</a></li>
								</ul>
							</div>
							<h6><code>.disabled</code> 禁用点击 <code>.active</code> 选中状态 <code>.ellipsis</code> 省略符</h6>
						</div>
						<div class="tab-content-pane" id="pagination-code">
							<pre class="prettyprint">
&lt;div class="pagination"&gt;
  &lt;ul&gt;
    &lt;li class="disabled"&gt;&lt;span href="#"&gt;上一页&lt;/span&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;span href="#"&gt;1&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ellipsis"&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;下一页&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		HOMOLO.COM | &copy; 2013 Built By SimpleeUI. All Right Reserved
	</div> 
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
</body>
</html>
